<template>

    <div ref="mapchartRef" style="width:100%;height:100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import 'echarts-gl'
import { ref, watch, onMounted, onUnmounted } from "vue";
import axios from 'axios'
const mapchartRef = ref(null)
let data = [
		{ name: '荷塘区', value: 50 },
		{ name: '芦淞区', value: 60 },
        { name: '石峰区', value: 75 },
        { name: '天元区', value: 100 },
        { name: '渌口区', value: 20 },
        { name: '攸县', value: 120 },
        { name: '茶陵县', value: 110 },
        { name: '炎陵县', value: 45 },
        { name: '醴陵市', value: 34 },
	]
let charts = {};
let option = {
    visualMap: {
        show: true,
        min: 0,
        max: 120,
        calculable: true,
        realtime: false,
        inRange: {
            color:["#3254DD","#2579EA", "#22E5E5","#22E59C","#E3E832","#F9925A",'#EA3D19']
        },
        textStyle: {
            color: '#fff'
        }
    },
    series: [{
        tooltip: {
            trigger: 'item'
        },
        zlevel: 4,
        name: '株洲',
        type: 'map3D',
        map: '株洲',
        boxDepth: 85, //地图倾斜度
        regionHeight: 3, //地图厚度
        label: {
            show: true, //是否显示市
            textStyle: {
                color: "#fff", //文字颜色
                fontSize: 12, //文字大小
                fontFamily: '微软雅黑',
                backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
            },
        },
        itemStyle: {
            opacity: 0.9, // 透明度
            borderWidth: 0.6, //分界线宽度
            // borderColor: "#207fce", //分界线颜色
        },
        groundplane: {
            show: false
        },
        data: data,
        // shading: 'realistic',
        // 真实感材质相关配置 shading: 'realistic'时有效
        realisticMaterial: {
            detailTexture: '#fff', // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0, // 0材质是非金属 ，1金属
            roughnessAdjust: 0
        },
        viewControl: {
            projection: 'perspective',
            distance: 1,
           left:-100,
        }
    },


    ],
    // dataRange: {
    //     show: false,
    //     splitList: splitList
    // },
    animation: false
};
const initEcharts = () => {
    charts = echarts.init(mapchartRef.value);
    getjsondata()
    window.addEventListener("resize", resizeFunction, false);

    
};

//处理echart的缩放问题
const resizeFunction = () => {
    charts.resize();
};
const getjsondata = () => {
    axios.get('/data/json/zhuzhou.geojson').then((res) => {
        console.log(res.data,'res.datares.data')
        echarts.registerMap("株洲", res.data)
        charts.setOption(option);
    })
}
onMounted(() => {
    initEcharts();

})
</script>